<template>
    <div id="formContait" size="medium" >
        <div style="position:absolute;width: 40%;left: 20%;top: 30%;">
            <el-form ref="form" label-width="80px" >
                <el-form-item label="溯源码">
                    <el-input ></el-input>
                </el-form-item>
                <el-button @click="drawer = true" type="primary" style="position:absolute;left: 40%">
                    查询
                </el-button>
            </el-form>
        </div>

        <el-drawer
                title="猪场基本信息"
                :visible.sync="drawer"
                size="55%">
            <div>

                <el-table
                    :data="piggery_info"
                    style="width: 100%">
                <el-table-column
                        prop="piggery_name"
                        label="猪场名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="piggery_location"
                        label="猪场地址"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="piggery_phone"
                        label="电话"
                        width="180"
                >
                </el-table-column>
                <el-table-column
                        prop="licence"
                        label="动物防疫许可证"
                        width="180"
                >
                </el-table-column>
                <el-table-column
                        prop="business_license"
                        label="营业执照"
                        width="180"
                >
                </el-table-column>
                <el-table-column
                        prop="juridical_person"
                        label="法人"
                        width="180"
                >
                </el-table-column>
            </el-table>
                <br/>
                <br/>
                <br/>
                <el-table
                        :data="pigInfo"
                        style="width: 100%">
                    <el-table-column
                            prop="pig_id"
                            label="耳标号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="品种"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="immunization_records"
                            label="免疫记录"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="feed_record"
                            label="饲养记录"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="feed_pic"
                            label="养殖照片"
                            width="180"
                    >
                    </el-table-column>
                </el-table>
                <br/>
                <br/>
                <br/>
                <el-table
                        :data="pigShowInfo"
                        style="width: 100%">
                    <el-table-column
                            prop="playing_time"
                            label="出场时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="mental_state"
                            label="出场精神状况"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="temperature"
                            label="体温"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="weight"
                            label="体重"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="test_results"
                            label="检验结果"
                            width="180"
                    >

                    </el-table-column>
                </el-table>
                <br/>
                <br/>
                <br/>
                <el-table
                        :data="slaughterhouseInfo"
                        style="width: 100%">
                    <el-table-column
                            prop="slaughter_certificate"
                            label="屠宰证书"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="slaughter_results"
                            label="屠宰前检验结果"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="post_slaughter_results"
                            label="屠宰后检验结果"
                            width="180"
                    >
                    </el-table-column>

                    </el-table-column>
                </el-table>
                <br/>
                <br/>
                <br/>
                <el-table
                        :data="transportation_information"
                        style="width: 100%">
                    <el-table-column
                            prop="transportationRoute1"
                            label="运输途径路线1"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="transportationRoute2"
                            label="运输途径路线2"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="transportationRoute3"
                            label="运输途径路线3"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="transportationRoute4"
                            label="运输途径路线4"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="transportationRoute5"
                            label="运输途径路线5"
                            width="180"
                    >

                    </el-table-column>
                </el-table>

                <br/>
                <br/>
                <br/>

                <el-table
                        :data="sale_info"
                        style="width: 100%">
                    <el-table-column
                            prop="licence"
                            label="营业执照"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="data"
                            label="生产日期"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="quality_data"
                            label="保质期"
                            width="180"
                    >
                    </el-table-column>
                </el-table>

                <el-button @click="innerDrawer = true">打开里面的!</el-button>
                <el-drawer
                        title="我是里面的"
                        :append-to-body="true"
                        :before-close="handleClose"
                        :visible.sync="innerDrawer">
                    <p>_(:зゝ∠)_</p>
                </el-drawer>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    export default {
        name: 'origin',
        data() {
            return {
                drawer: false,
                innerDrawer: false,
                piggery_info: [{
                    piggery_name: '二师兄牧业',
                    piggery_location: '湖南省娄底市',
                    piggery_phone: '12345678',
                    licence: 'GA123456',
                    business_license: 'DA123456',
                    juridical_person: '二师兄'
                }],
                pigInfo:[{
                    pig_id:"1",
                    type:"仔猪",
                    immunization_records:"2021-02-10",
                    feed_record:"2021-12-10",
                    feed_pic:"xxx"
                }],
                pigShowInfo:[{
                    playing_time:"2021-12-10",
                    mental_state:"良好",
                    temperature:"37",
                    weight:"200",
                    test_results:"正常"
                }],
                slaughterhouseInfo:[{
                    slaughter_certificate:"#889089",
                    slaughter_results:"好",
                    post_slaughter_results:"好"
                }],
                transportation_information:[{
                    transportationRoute1:"株洲",
                    transportationRoute2:"长沙",
                    transportationRoute3:"永州",
                    transportationRoute4:"娄底",
                    transportationRoute5:"衡阳"
                }],
                sale_info:[{
                    licence:"GA123456",
                    data:"2022-12-12",
                    quality_data:"2022-12-12"
                }]
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('还有未保存的工作哦确定关闭吗？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }
        }
    };
</script>

<style scoped>
#formContait{

}
</style>